<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 外部样式表 -->
    <link href="style.css" rel="stylesheet" />
    <!-- 内部样式表 -->
    <style>
      h2 {
        background-color: darkblue;
      }
    </style>
  </head>
  <body>
    <!-- 内联样式 -->
    <h1 style="background-color: aquamarine">标题111</h1>
    <h2>H2标签</h2>
    <div class="box">
      <div class="box1">
        <div class="box2"></div>
      </div>
    </div>
    <div class="box3"></div>
    <!--  -->
    <br />
    <hr />
    <div class="float-box">
      out of normal: Loremipsum dolor sit amet,consectetur adipisicingelit.
      Sequi esse impeditautem praesentiummagni culpa, ametcorporis,veniam
      consequatur voluptatestemporibus. Voluptateseius similique
      asperiorescupiditate fugit hic atquequisquam?
    </div>
    <h2>Normal content</h2>
    <p>
      out of normal: Loremipsum dolor sit amet,consectetur adipisicingelit.
      Sequi esse impeditautem praesentiummagni culpa, ametcorporis,veniam
      consequatur voluptatestemporibus. Voluptateseius similique
      asperiorescupiditate fugit hic atquequisquam?
    </p>
    <div>
      out of normal: Loremipsum dolor sit amet,consectetur adipisicingelit.
      Sequi esse impeditautem praesentiummagni culpa, ametcorporis,veniam
      consequatur voluptatestemporibus. Voluptateseius similique
      asperiorescupiditate fugit hic atquequisquam?
    </div>
    <!--  -->
    <br />
    <hr />
    <h1>样式</h1>
    <div class="back">
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
      <p>背景图片固定，滚动页面</p>
    </div>
    <br />
    <hr />
    <p>background-clip: padding-box:</p>
    <div id="example2">
      <h3>www.fishc.com</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat.
      </p>
    </div>
    <br />
    <hr />
    <p>鼠标指示</p>
    <span style="cursor: auto">auto</span><br />
    <span style="cursor: crosshair">crosshair</span><br />
    <span style="cursor: default">default</span><br />
    <span style="cursor: e-resize">e-resize</span><br />
    <span style="cursor: help">help</span><br />
    <span style="cursor: move">move</span><br />
    <span style="cursor: n-resize">n-resize</span><br />
    <span style="cursor: ne-resize">ne-resize</span><br />
    <span style="cursor: nw-resize">nw-resize</span><br />
    <span style="cursor: pointer">pointer</span><br />
    <span style="cursor: progress">progress</span><br />
    <span style="cursor: s-resize">s-resize</span><br />
    <span style="cursor: se-resize">se-resize</span><br />
    <span style="cursor: sw-resize">sw-resize</span><br />
    <span style="cursor: text">text</span><br />
    <span style="cursor: w-resize">w-resize</span><br />
    <span style="cursor: wait">wait</span><br />
    <br> <hr>
    <p>文本</p>
<div style="width: 200px; height: 200px;">
  <p class="dire">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.
  </p>
  <p class="dire2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.
  </p>
</div>
  </body>
</html>
